<template>
  <div class="container">
    <el-card shadow="always">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="定期门店检测" name="0">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-input
                maxlength="50"
                v-model="query.searchValue"
                clearable
                placeholder="请输入被检查单位名称"
              ></el-input>
            </el-col>
            <!-- <el-col :span="4">
          <el-select v-model="value" placeholder="请选择考核结果" clearable>
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col> -->
            <el-col :span="2">
              <el-button
                type="primary"
                @click="
                  query.page = 1;
                  getList();
                "
                >查询</el-button
              >
            </el-col>
          </el-row>
          <rz-height></rz-height>

          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="checkName" label="名称">
            </el-table-column>
            <el-table-column prop="checkDateStr" label="检查日期">
            </el-table-column>
            <el-table-column prop="checkUserName" label="检查组人员">
            </el-table-column>
            <el-table-column prop="supUnitName" label="被查单位">
            </el-table-column>
            <el-table-column prop="" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="view(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total"
            @pagination="getList"
            :page.sync="query.page"
          />
        </el-tab-pane>
        <el-tab-pane label="自查报告" name="1">
<el-row>
   <el-col :span="4">
          <el-select
            v-model="query.year"
            clearable
            placeholder="请选择年份"
            @change="getReport()"
          >
            <el-option
              v-for="(item, index) in listYear"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>
</el-row>




  <div class="list">
        <div class="item" v-for="item in list" :key="item.id">
          <div class="title">
            {{ item.systemType }}
          </div>
          <el-image
            v-for="url in item.URLList"
            :key="url"
            style="width: 150px; height: 150px"
            :src="url"
            fit="fill"
            :preview-src-list="item.URLList"
          ></el-image>
          <rz-height></rz-height>
          <div
            v-for="(url, index) in item.fileList"
            :key="url"
            class="enclosure"
            @click="$downloadFiles(url)"
          >
            附件{{ index + 1 }}
          </div>
        </div>
      </div>
          <el-empty description="暂无数据" v-if="!list.length"></el-empty>




























        </el-tab-pane>
      </el-tabs>
    </el-card>
    <rz-dialog
      :dialogVisible.sync="dialogVisible"
      :isShowConfirm="false"
      title="查看定期互查"
    >
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="检查名称">
              {{ data.checkName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查时间">
              {{ data.checkDateStr }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发现食品安全问题隐患" label-width="200px">
              {{ data.potentialProblems }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查组人员">
              {{ data.checkUserName }}
            </el-form-item>
          </el-col>
        </el-row>

 <el-row>
          <el-col :span="12">
            <el-form-item label="检查对象">
              {{ data.supUnitName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查图片">
             <el-image
            v-for="(index, item) in data.imgList"
            :key="item"
            style="width: 150px; height: 150px"
            :src="index.fileUrl"
            fit="cover"
            :preview-src-list="data.imgList.map((x) => x.fileUrl)"
          ></el-image>
            </el-form-item>
          </el-col>
        </el-row>



        
        <!-- <el-form-item label="现场照片">
          <el-image
            v-for="(index, item) in data.imgList"
            :key="item"
            style="width: 150px; height: 150px"
            :src="index.fileUrl"
            fit="cover"
            :preview-src-list="data.imgList.map((x) => x.fileUrl)"
          ></el-image>
        </el-form-item> -->
        
      </el-form>
    </rz-dialog>
  </div>
</template>
<script>
//
import {
  // resultListByCondition,
  // resultFindResponseById,
  findListByConditionCheck,
  findResponseByIdCheck,
  QueryselfExaminationReportList
} from "@/api/modules/chain";
export default {
  // props:[],
  // 页面加载
  created() {


    for (let index = 2021; index <= new Date().getFullYear(); index++) {
     this.listYear.push(index)
      
    }


    
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      //   options: ["合格", "不需要考核"],
      query: {
        // startCheckDate: "",
        // isPage: 0,
        // page: 1,
        // pageSize: 10,
        // searchValue: "",
        // workStationId: sessionStorage.getItem("workId"),

        endCheckDate: "",
        isPage: 0,
        page: 1,
        pageSize: 10,
        searchValue: "",
        startCheckDate: "",
        unitid: sessionStorage.getItem("chainId"),
        workStationId:  sessionStorage.getItem("chainId"),
        year:new Date().getFullYear(),
      },
      tableData: [],
      total: 0,
      dialogVisible: false,
      data: {},
      activeName: "0",
      list:[],
      listYear:[]
    };
  },
  // 方法
  methods: {
    getList() {
      findListByConditionCheck(this.query).then((res) => {
        // res.data.forEach((x) => {
        //   for (const key in x) {
        //     if (!x[key]) {
        //       x[key] = "--";
        //     }
        //   }
        // });
        this.total = res.totalCount;
        this.tableData = res.data;
      });
    },
    view(e) {
      findResponseByIdCheck({
        params: { id: e.id },
      }).then((res) => {
        this.data = res.data;
        this.dialogVisible = true;
      });
    },
    handleClick(e) {
      if (e.index == 0) {
        this.getList();
      }else{
        this.getReport()
      }
    },
    getReport() {
      QueryselfExaminationReportList(this.query).then(
        (res) => {
          res.data.forEach((item) => {
            item.fileList = [];
            item.URLList = [];
            item.urlList.forEach((x) => {
              if (x.match(/[^\.]\w*$/)[0] !== "pdf") {
                item.URLList.push(x);
              } else {
                item.fileList.push(x);
              }
            });
          });
          this.list = res.data;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  padding: 10px;
  .item {
    padding: 10px 30px;
  }
  .title {
    font-weight: 600;
    font-size: 14px;
  }
}
.green {
  color: #008000;
}
.red {
  color: #ff0000;
}
  .enclosure {
    color: $default;
    cursor: pointer;
    font-size: 16px;
  }
</style>